<!--
 * @Description:
 * @Author: zhaolei
 * @Date: 2023-07-03 15:46:45
-->
<template>
  <el-dialog
    title="关闭预约记录"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-form
      v-if="visible"
      ref="addForm"
      v-model="form"
      :option="tableOption"
    >
      <template #reserveType>
        <div style="color: red">
          {{ form.reserveType === '1' ? '领养' : '送养' }}
        </div>
      </template>
    </avue-form>
    <div class="flex-end">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        class="btn"
        type="primary"
        :loading="loading"
        @click="confirm"
      >
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getObj, closeObj } from '@/api/core/appointment';
import { tableOption } from '@/const/crud/appointment/closePopup';
export default {
  name: 'closePopup',
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      loading: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    tableOption() {
      return tableOption();
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.id && this.getDetail();
        });
      } else {
        this.$refs.addForm && this.$refs.addForm.resetForm();
      }
    },
  },
  methods: {
    async getDetail() {
      const res = await getObj(this.id);
      this.form = { ...res.data.data };
      this.form.petCode = this.form.petCode || '无';
      this.form.content = this.form.content || '暂无预约内容描述';
      if (this.form.petName && this.form.petId) {
        this.form.petName = `${this.form.petName}（${this.form.petId}）`;
      } else {
        this.form.petName = '无';
      }
    },
    confirm() {
      this.$refs.addForm.validate((valid, done) => {
        if (valid) {
          this.$confirm(
            '关闭该条预约记录后，客户需重新进行预约提交，您确认关闭该条预约记录吗？',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(async () => {
              try {
                this.loading = true;
                const params = {
                  id: this.form.id,
                  closeRemark: this.form.closeRemark,
                  reason: this.form.reason,
                };
                await closeObj(params);
                this.loading = false;
                this.visible = false;
                this.$message.success('操作成功');
                this.$emit('success', true);
              } catch (error) {
                this.loading = false;
              }
            })
            .catch(() => {
              done();
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input--small.is-disabled {
    margin-left: 20px;
  }
  .avue-group .el-collapse-item__header {
    margin-bottom: 0;
  }
  // .el-textarea.el-input--small.is-disabled.avue-input .el-textarea__inner {
  //   height: 30px !important;
  //   min-height: 30px !important;
  // }
}
</style>
